<template>
  <div class="login">
    <!-- //登录导航栏 -->
    <header>
     <van-nav-bar
       title="登录"
       left-arrow
       @click-left="onClickLeft"
     />
    </header>
  <main>
  <form action="">
    <input type="text" placeholder="请输入手机号码" class="tel" v-model="userInfo.user_phone">
    <input type="password" placeholder="请输入密码" class="pass" v-model="userInfo.password">
    <br>
    <span class="sub" @click="goToLogin">登录</span>
  </form>
  </main>
    <p>
    <span>忘记密码</span>
    <span @click="goToReg">立即注册</span>
   </p>
   <p class="agree">登陆注册表示您同意<i>《助农汇服务协议》</i></p>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { userLoginApi,getUserInfoApi } from "../utils/api.js";
import { ref,reactive, onMounted, nextTick } from "vue";
export default {
  setup() {
    const router=useRouter();
    const store=useStore();
    const onClickLeft = () =>{
      router.push('/home/mine');
    };

    const goToReg=()=>{
      router.push('/registry');
    };
    
    const userInfo=reactive({
      user_phone:'',
      password:'',
    })

    const userToken=reactive({
      token:'',
    });

    //登录成功
    const goToLogin= async ()=>{
      if(userInfo.user_phone&&userInfo.password){
        const success=await userLoginApi(userInfo); 
          console.log(success);
          if(success.status===0){
            userToken.token=success.token;
            localStorage.setItem('userToken',userToken.token);
            store.dispatch("getUserInfo");
            router.push('/home/index');
          }
      } 
    }

    return {
      onClickLeft,
      goToReg,
      goToLogin,
      userInfo,
      userToken,
    };
  },
};
</script>
<style lang="scss" scoped>
.login{
  background:#f5f5f5;
  position: fixed;
  top:0;
  bottom:0;
  left:0;
  padding:10px;
  width:100%;
  height:100%;
  .van-nav-bar{
    background: #f5f5f5;
  }
  p{
  width:90%;
  margin:0 auto;
  display:flex;
  justify-content: space-between;
  font-size:16px;
  line-height:45px;
  span{
    color:#ccc;
  }
}
.agree{
  display:block;
  text-align:center;
  position:fixed;
  bottom:20px;
  left:center;
  i{
    color:green;
  }
}
}
main{
  padding:20px;
  background: #fff;
  height:50%;
  width:90%;
  border-radius:10px;
  margin:100px auto 0;
  position:relative;
  input{
    outline:none;
    border:0;
    width:100%;
    height:50px;
    border-bottom:solid #ccc 1px;
    font-size:16px;
    text-indent:30px;
  }
  .tel{
      background: url("../assets/img/手机@2x.png") no-repeat 0px 10px;
      background-size:20px 30px ;
  }
  .pass{
      background: url("../assets/img/验证码@2x.png") no-repeat 0px 10px;
      background-size:20px 30px ;
  }
  .yzm{
      background: url("../assets/img/验证码@2x.png") no-repeat 0px 10px;
      background-size:20px 30px ;
  }
  span{
    display:inline-block;
    font-size:16px;
    line-height:36px;
    text-align: center;
    position:absolute;
    top:127px;
    right:30px;
    height:36px;
    width:100px;
    border-radius:18px;
    background:rgb(28, 187, 174);
    outline:none;
    border:0;
    color:#fff;
  }
  .sub{
    display:inline-block;
    width:80%;
    height:40px;
    line-height:40px;
    border-radius:25px;
    background:rgb(28, 187, 174);
    margin:20px  0 0 30px;
    color:#fff;
    font-size:20px;
    text-indent:0;
  }
}
</style>